// src/components/forum/CarDiscussion.jsx
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import { getItem, setItem } from '../../utils/localStorage';
import { useAuth } from '../../contexts/AuthContext';

const CarDiscussion = () => {
  const [posts, setPosts] = useState([]);
  const { user } = useAuth();

  useEffect(() => {
    // Initialize car discussion posts if they don't exist
    const storedPosts = JSON.parse(getItem('car_discussion_posts') || '[]');
    if (storedPosts.length === 0) {
      const initialPosts = [
        {
          id: 1,
          title: 'Ferrari 488 GT3性能分析',
          content: '本帖详细分析了Ferrari 488 GT3的性能特点和驾驶要点...',
          author: 'carexpert',
          views: 1240,
          replies: 28,
          createdAt: '2024-02-15T08:30:00Z',
          tags: ['法拉利', 'GT3', '性能分析']
        },
        {
          id: 2,
          title: 'AMG GT3对比保时捷911 GT3',
          content: '两款顶级GT3赛车的详细对比分析...',
          author: 'racingpro',
          views: 890,
          replies: 15,
          createdAt: '2024-02-14T15:45:00Z',
          tags: ['AMG', '保时捷', '对比测评']
        }
      ];
      setItem('car_discussion_posts', JSON.stringify(initialPosts));
      setPosts(initialPosts);
    } else {
      setPosts(storedPosts);
    }
  }, []);

  return (
    <div className="space-y-6">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-2xl font-bold text-gray-900">赛车讨论</h1>
          <p className="mt-1 text-gray-600">
            讨论各类赛车的性能特点、驾驶体验和技术分析
          </p>
        </div>
        {user && (
          <Link
            to="/forum/cars/new"
            className="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700"
          >
            发布讨论
          </Link>
        )}
      </div>

      <div className="bg-white rounded-lg shadow-md overflow-hidden">
        <div className="divide-y">
          {posts.map((post) => (
            <div key={post.id} className="p-6">
              <div className="space-y-3">
                <div className="flex justify-between items-start">
                  <h2 className="text-xl font-semibold">
                    <Link
                      to={`/forum/cars/post/${post.id}`}
                      className="hover:text-blue-600"
                    >
                      {post.title}
                    </Link>
                  </h2>
                  <span className="text-sm text-gray-500">
                    {post.views} 浏览 · {post.replies} 回复
                  </span>
                </div>
                <div className="text-gray-600 line-clamp-2">{post.content}</div>
                <div className="flex items-center justify-between">
                  <div className="flex items-center space-x-2">
                    {post.tags.map((tag, index) => (
                      <span
                        key={index}
                        className="px-2 py-1 bg-gray-100 text-gray-600 text-sm rounded"
                      >
                        {tag}
                      </span>
                    ))}
                  </div>
                  <div className="text-sm text-gray-500">
                    由 {post.author} 发布于{' '}
                    {new Date(post.createdAt).toLocaleDateString()}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default CarDiscussion;